<template>
  <view class="cc-textarea-container">
    <textarea class="textarea-body" :style="{height: height}" :show-confirm-bar="false" :auto-focus="true"
      :maxlength="maxlength" :adjust-position="false" :ignoreCompositionEvent="false" :value="value"
      @input="changeInput"></textarea>
    <view class="textarea-placeholder" v-show="value === ''">
      {{placeholder}}
    </view>
    <view class="textarea-count">
      {{textareaCount}}/{{maxlength}}字
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      // 占位文字
      placeholder: {
        type: String,
        default: ''
      },
      // 字数限制个数
      maxlength: {
        type: Number,
        default: 300
      },
      // 文本域高度
      height: {
        type: String,
        default: '400rpx'
      }
    },
    computed: {
      textareaCount: function() {
        return this.value.length > this.maxlength ? this.maxlength : this.value.length
      }
    },
    data() {
      return {
        descriptionInputVal: '',
      }
    },
    methods: {
      changeInput: function(e) {
        this.$emit('input', e.detail.value)
      }
    }
  }
</script>

<style lang="scss">
  .cc-textarea-container {
    position: relative;
    width: 100%;

    .textarea-body {
      box-sizing: border-box;
      width: 100%;
      height: 400rpx;
      padding: 24rpx;
      border-radius: 12rpx;
      background-color: #F3F3F3;
      font-size: 24rpx;
      line-height: 40rpx;
      color: #000;
    }

    .textarea-placeholder {
      position: absolute;
      top: 24rpx;
      left: 24rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      color: #0000004D;
    }

    .textarea-count {
      position: absolute;
      bottom: 4rpx;
      right: 8rpx;
      font-size: 20rpx;
      color: #0000004D;
    }
  }
</style>